<template>
  <div>
    <!-- 面包屑 -->
    <div class="crumbs">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-s-fold"></i> 首页</el-breadcrumb-item>
        <el-breadcrumb-item>商户管理</el-breadcrumb-item>
        <el-breadcrumb-item>商户详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 表单 -->
    <el-card>
      <el-descriptions :data="Detail" class="margin-top" size="medium" title="商户详情" :column="2" border>
        <template slot="extra">
          <el-button type="primary" size="medium" @click="goBack">返回</el-button>
        </template>
        <el-descriptions-item label="商店名称：">{{ Detail.name }}</el-descriptions-item>
        <el-descriptions-item label="营业执照号码：">{{ Detail.license }}</el-descriptions-item>
        <el-descriptions-item label="负责人：">{{ Detail.director }}</el-descriptions-item>
        <el-descriptions-item label="负责人手机号：">{{ Detail.directorphone }}</el-descriptions-item>
        <el-descriptions-item label="身份证号码：">{{ Detail.idcard }}</el-descriptions-item>
        <el-descriptions-item label="经营区域：">{{ Detail.area }}</el-descriptions-item>
        <el-descriptions-item label="注册时间：">{{ Detail.createdate }}</el-descriptions-item>
        <el-descriptions-item label="审核状态：">{{ Detail.state == 1 ? '已审核' : '未审核' }}</el-descriptions-item>
        <el-descriptions-item label="详细地址：">{{ Detail.address }}</el-descriptions-item>
        <el-descriptions-item label="商家介绍：">{{ Detail.content }}</el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "MerchantDetail",
  data() {
    return {
      pageInfo: {
        pageNum: 1,
        pageSize: 2,
        total: 20
      },
      Detail: [],
      id: null // 添加id属性
    }
  },
  mounted() {
    this.id = this.$route.query.id // 获取传递的id
    this.getMerchantDetail()
  },
  methods: {
    async getMerchantDetail() {
      if (!this.id) {
        console.log('id未传递')
        return
      }
      let { pageNum, pageSize } = this.pageInfo;
      let res = await this.$API.Merchant.reqMerchantDetails(this.id, pageNum, pageSize)
      if (res.code === 200) {
        this.Detail = res.data.list[0]
        console.log(this.Detail);
      }
    },
    goBack() {
      this.$router.go(-1);
    }
  }
}
</script>
<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
<style scoped>
.around {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-weight: bold;
}
</style>